<template>
	<div class="system-menu-container layout-pd">

		<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
			<el-tab-pane label="全部客户" name="first">
				<el-card shadow="hover" style="border: 0;">
					<div class="system-menu-search mb15">
						<el-input size="default" v-model="state.searchForm.keyword" placeholder="搜索关键词"
							style="max-width: 300px;margin:5px"> </el-input>
						<el-select v-model="state.searchForm.state" clearable placeholder="客户状态" size="normal"
							style="width: 300px;margin:5px">
							<el-option v-for="item in options1" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
						<el-date-picker v-model="date" type="date" style="width: 300px;margin:5px" placeholder="跟进时间"
							size="normal" />
						<el-select v-model="value3" clearable placeholder="客户类型" size="normal"
							style="width: 300px;margin:5px">
							<el-option v-for="item in options3" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>

						<el-select v-model="state.searchForm.star" clearable placeholder="客户星级" size="normal"
							style="width: 300px;margin:5px">
							<el-option v-for="item in options2" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>

						<el-button size="default" type="primary" @click="handleSearch" class="ml10">
							<el-icon>
								<ele-Search />
							</el-icon>
							查询
						</el-button>
						<el-button size="default" @click="resetSearch" type="default" class="ml10">
							重置
						</el-button>
						<el-button size="primary" text class="ml10">
							<el-icon color="#409eff">
								<Filter />
							</el-icon>
							高级筛选
						</el-button>

					</div>
					<div class="setting-button responsive-container">
						<div class="left-buttons">
							<el-button class="ml10" type="primary" size="default" round>添加</el-button>
							<el-button class="ml10" round size="default">导入</el-button>
							<el-button class="ml10" type="default" size="default" round>导出</el-button>
							<el-button class="ml10" type="default" size="default" round>新建任务</el-button>
							<el-button class="ml10" type="default" size="default" round>转移客户</el-button>
							<el-button class="ml10" type="default" size="default" round>移入公海</el-button>
							<el-button class="ml10" type="default" size="default" round>合并客户</el-button>
							<el-button class="ml10" type="default" size="default" round>批量编辑</el-button>
						</div>

						<div class="right-controls">
							<div class="follow-mode">
								<span class="label">跟进模式</span>
								<el-tooltip content="当对列表客户写跟进时,会自动将刚刚写过跟进的客户排到最后" placement="bottom">
									<el-icon class="info-icon">
										<QuestionFilled />
									</el-icon>
								</el-tooltip>
							</div>

							<div class="action-buttons">
								<el-button type="default" size="default" round>排序</el-button>
								<el-button type="default" size="default" round>列表</el-button>
							</div>
						</div>
					</div>
					<div class="test-container">
						商标<span style="vertical-align: super;line-height: 0;font-size: 0.5em;">@</span>
					</div>
					<el-table :data="paginatedData" style="width: 100%;height: 50%;">
						<el-table-column type="selection" width="55" />
						<el-table-column property="customer" label="客户名称">
							<template #default="scope">{{ scope.row.customer }}</template>

						</el-table-column>
						<el-table-column property="state" label="客户状态">
							<template #default="scope">
								<div v-if="scope.row.state == 0">正在跟进</div>
								<div v-if="scope.row.state == 1">初级洽谈</div>

							</template>

						</el-table-column>
						<el-table-column property="star" label="客户星级">
							<template #default="scope">
								<span style="color:#ffcc22" v-for="item in scope.row.star">&#9733;</span>
							</template>

						</el-table-column>

						<el-table-column property="firstName" label="首联系人" show-overflow-tooltip>
							<template #default="scope">{{ scope.row.firstName }}</template>

						</el-table-column>
						<el-table-column property="phone" label="手机号码">
							<template #default="scope">{{ scope.row.phone }}</template>
						</el-table-column>
						<el-table-column property="date" label="最后跟进">
							<template #default="scope">{{ scope.row.date }}</template>
						</el-table-column>
						<el-table-column label="操作" show-overflow-tooltip width="220">
							<template #default="scope">
								<el-button size="small" text type="primary" @click="onOpenAddMenu('add')">跟进</el-button>
								<el-button size="small" text type="primary"
									@click="onOpenEditMenu('edit', scope.row)">编辑</el-button>
								<el-button size="small" text type="primary"
									@click="onOpenEditMenu('edit', scope.row)">置顶</el-button>
								<el-button size="small" text type="primary"
									@click="onTabelRowDel(scope.row)">删除</el-button>
							</template>
						</el-table-column>

					</el-table>
					<!-- <el-row :gutter="15" >
						<el-col :xs="24" :sm="14" :md="14" :lg="16" :xl="16"> -->
					<div class="footer-container">
						<div class="left">
							<!--  -->
							<!--  -->
							<el-button round type="default" size="default">
								<el-checkbox v-model="allChecked" label="全选" size="large" />
							</el-button>
							<el-button round type="default" size="default">
								<el-checkbox v-model="reveseChecked" label="反选" size="large" />
							</el-button>
							<el-button round type="default" size="default">更多操作<el-icon class="el-icon--right">
									<ArrowDown />
								</el-icon></el-button>
						</div>
						<div class="right">
							<el-pagination v-model:current-page="state.pagination.pageNum"
								v-model:page-size="state.pagination.pageSize" :total="total"
								:page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper"
								@size-change="handleSizeChange" @current-change="handlePageChange" />
						</div>
					</div>
					<!-- </el-col>
					</el-row>
						 -->
				</el-card>

			</el-tab-pane>
			<el-tab-pane label="我的客户" name="second">
				<el-card shadow="hover"></el-card>

			</el-tab-pane>
			<el-tab-pane label="下属客户" name="third"> <el-card shadow="hover"></el-card>
			</el-tab-pane>
			<el-tab-pane label="重点客户" name="fourth"> <el-card shadow="hover"></el-card>
			</el-tab-pane>
		</el-tabs>
		<MenuDialog ref="menuDialogRef" @refresh="getTableData()" />
	</div>
</template>

<script setup lang="ts" name="systemMenu">
import { defineAsyncComponent, ref, onMounted, reactive, computed } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useRoutesList } from '/@/stores/routesList';
import { setBackEndControlRefreshRoutes } from '/@/router/backEnd';
import { QuestionFilled, Filter, ArrowDown } from '@element-plus/icons-vue';
import type { TabsPaneContext } from 'element-plus'
const activeName = ref('first')
const handleClick = (tab: TabsPaneContext, event: Event) => {
	console.log(tab, event)
}
// 引入组件

// 定义变量内容
const stores = useRoutesList();
const { routesList } = storeToRefs(stores);
const menuDialogRef = ref();
const state = reactive({
	// 原始数据（通常从API获取）
	allData: [],
	// 加载状态
	loading: false,
	// 分页参数
	pagination: {
		pageNum: 1,    // 当前页码
		pageSize: 10,  // 每页条数
		total: 0       // 总条数
	},
	searchForm: {
		keyword: '',
		state: '',
		star: ''
	}
});
const date = ref('');
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');

const allChecked = ref(false)
const reveseChecked = ref(false)

const options1 = [
	{
		value: '1',
		label: '已跟进',
	},
	{
		value: '2',
		label: '已完成',
	},
	{
		value: '3',
		label: '已拒决',
	},
	{
		value: '4',
		label: '未开始',
	},
	{
		value: '5',
		label: '已取消',
	},
];
const options2 = [
	{
		value: '1',
		label: '一星级',
	},
	{
		value: '2',
		label: '二星级',
	},
	{
		value: '3',
		label: '三星级',
	},
	{
		value: '4',
		label: '四星级',
	},
	{
		value: '5',
		label: '五星级',
	},
];
const options3 = [
	{
		value: '1',
		label: '电商用户',
	},
	{
		value: '2',
		label: '物流用户',
	},
	{
		value: '3',
		label: '商品用户',
	},
	{
		value: '4',
		label: '政府用户',
	},
	{
		value: '5',
		label: '房地产用户',
	},
];
// 模拟数据
const mockData = Array.from({ length: 100 }, (_, i) => ({
	id: i + 1,
	customer: `客户${i + 1}`,
	state: i % 2,
	star: (i % 5) + 1,
	firstName: `联系人${i + 1}`,
	phone: `138${Math.floor(10000000 + Math.random() * 90000000)}`,
	date: `2023-${Math.floor(Math.random() * 12) + 1}-${Math.floor(Math.random() * 28) + 1}`
}));


// 打开新增菜单弹窗;
const onOpenAddMenu = (type: string) => {
	menuDialogRef.value.openDialog(type);
};
// 打开编辑菜单弹窗
const onOpenEditMenu = (type: string, row: RouteRecordRaw) => {
	menuDialogRef.value.openDialog(type, row);
};
// 计算属性：过滤后的数据（支持搜索）
const filteredData = computed(() => {
	let result = [...state.allData];

	// 关键字搜索
	// if (state.searchForm.keyword) {
	// 	const keyword = state.searchForm.keyword.toLowerCase();
	// 	result = result.filter(item =>
	// 		item.customer.toLowerCase().includes(keyword) ||
	// 		item.firstName.toLowerCase().includes(keyword)
	// 	);
	// }

	// // 状态筛选
	// if (state.searchForm.state !== '') {
	// 	result = result.filter(item => item.state == state.searchForm.state);
	// }

	// // 星级筛选
	// if (state.searchForm.star !== '') {
	// 	result = result.filter(item => item.star == state.searchForm.star);
	// }

	return result;
});

// 计算属性：当前页数据
const paginatedData = computed(() => {
	const start = (state.pagination.pageNum - 1) * state.pagination.pageSize;
	const end = start + state.pagination.pageSize;
	return filteredData.value.slice(start, end);
});

// 计算属性：总条数（用于分页）
const total = computed(() => filteredData.value.length);

// 获取数据
const fetchData = async () => {
	state.loading = true;
	try {
		// 这里应该是API调用，我们用模拟数据代替
		state.allData = mockData;
		state.pagination.total = mockData.length;
	} finally {
		state.loading = false;
	}
};

// 页码改变
const handlePageChange = (page) => {
	state.pagination.pageNum = page;
};

// 每页条数改变
const handleSizeChange = (size) => {
	state.pagination.pageSize = size;
	state.pagination.pageNum = 1; // 重置到第一页
};

// 搜索
const handleSearch = () => {
	state.pagination.pageNum = 1; // 搜索后重置到第一页
	state.pagination.total = filteredData.value.length;

	// state.searchForm.keyword
	// tate.searchForm.state
	// state.searchForm.star
	state.allData = state.allData.filter(item => {
		if (state.searchForm.keyword) {
			const keyword = state.searchForm.keyword.toLowerCase();
			return item.customer.toLowerCase().includes(keyword) ||
				item.firstName.toLowerCase().includes(keyword);
		}
		if (state.searchForm.state !== '') {
			return item.state == state.searchForm.state;
		}
		if (state.searchForm.star !== '') {
			return item.star == state.searchForm.star;
		}
		// return true;
	})


};

// 重置搜索
const resetSearch = () => {
	state.searchForm = {
		keyword: '',
		state: '',
		star: ''
	};
	// handleSearch();
	fetchData();

};

// 页面加载时
onMounted(() => {
	fetchData();
});
</script>
<style lang="scss" scoped>
.system-menu-container {
	border-radius: 20px;
	overflow: hidden
}

.demo-tabs {
	background-color: #fff;
	padding: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;


}

.demo-tabs>.el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
	background-color: #fff;
}

.setting-button {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
	padding: 12px 0;

	// 左侧按钮区域
	.left-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;

		// 在小屏幕上减少按钮内边距
		.el-button {
			@media (max-width: 1200px) {
				padding: 8px 12px;
				font-size: 13px;
			}
		}
	}

	// 右侧控制区域
	.right-controls {
		display: flex;
		align-items: center;
		gap: 24px;

		.follow-mode {
			display: flex;
			align-items: center;
			gap: 8px;
			white-space: nowrap;

			.label {
				font-size: 14px;
				color: var(--el-text-color-regular);
			}

			.info-icon {
				color: var(--el-text-color-secondary);
				cursor: pointer;
				font-size: 16px;

				&:hover {
					color: var(--el-color-primary);
				}
			}
		}

		.action-buttons {
			display: flex;
			gap: 8px;
		}
	}

	// 响应式断点
	@media (max-width: 1400px) {

		// 在较大屏幕但空间不足时，改为垂直布局
		.right-controls {
			width: 100%;
			justify-content: flex-end;
		}
	}

	@media (max-width: 992px) {


		// 中等屏幕：左右区域垂直排列
		.left-buttons,
		.right-controls {
			width: 100%;
			justify-content: flex-start;
		}

		.right-controls {
			flex-wrap: wrap;
		}
	}

	@media (max-width: 768px) {

		// 小屏幕：进一步紧凑布局


		gap: 8px;

		.left-buttons {
			.el-button {
				padding: 6px 10px;
				font-size: 12px;

				// 隐藏文字，只显示图标（如果需要）
				// & > span { display: none; }
			}
		}

		.right-controls {
			gap: 12px;

			.follow-mode {
				.label {
					font-size: 13px;
				}
			}
		}
	}
}


.footer-container {
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.left {
		// margin-top: px;
		margin-right: 10px;
		display: flex;
	}

}
</style>
